<template>
  <div>
    <zm-panel :title="Title" :visible.sync="value" @change="close">
      <zm-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="90px"
        label-position="left"
        class="ml20"
      >
        <zm-form-item label="一级分组">{{ rowObj.row.name }}</zm-form-item>
        <zm-form-item label="二级类目" prop="name">
          <zm-input
            v-model.trim="form.name"
            class="w260"
            placeholder="请输入二级类目名称，不超过20个字"
            maxlength="20"
            show-word-limit
          ></zm-input>
        </zm-form-item>
        <zm-form-item label="产品列表">
          <zm-button size="mini" @click="onAddProduct">添加产品</zm-button>
        </zm-form-item>
      </zm-form>
      <zm-table-data
        :data="productData"
        :columns="columns"
        :table-params="tableParams"
        :max-height="700"
      ></zm-table-data>

      <div slot="footer" class="tr">
        <zm-button @click="close" type="info">返回</zm-button>
        <zm-button @click="onSave" type="primary">确定</zm-button>
      </div>
    </zm-panel>
    <select-product
      v-if="spParams.visible"
      v-model="spParams.visible"
      :checked-arr="checkedArr"
      @handle-after="selectProductCallBack"
    ></select-product>
  </div>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import tableMixin from '@/mixins/zmTableMixin'
import { secondColumns } from '../../const'
import productApis from '@/api/src/product'
import productCategoryApis from '@/api/src/productCategory'
import selectProduct from '@/components/SelectProduct'
export default {
  // 添加二级类目
  name: 'AddSecond',
  components: { selectProduct },
  mixins: [panelMixin, tableMixin],
  props: {
    rowObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      form: {
        name: ''
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
      chooseProductParams: {
        visible: false
      },
      spParams: {
        visible: false
      },
      productData: []
      // productId: ''
    }
  },
  computed: {
    columns () {
      return secondColumns(this)
    },
    Title () {
      return this.rowObj.type === 'edit' ? '编辑二级类目' : '新增二级类目'
    },
    checkedArr () {
      if (this.productId) {
        return this.productId.split(',')
      } else {
        return []
      }
    },
    productId: {
      get () {
        return this.productData.map((i) => i.id).join(',')
      },
      set () {}
    }
  },
  watch: {},
  created () {
    if (this.rowObj.type === 'edit') {
      this.initSecondMsg()
    }
  },
  methods: {
    // 二级类目数据回填
    async initSecondMsg () {
      this.form.name = this.rowObj.row.name
      const productId = this.rowObj.row.productId
      if (!productId) {
        return
      }
      const pageSize = productId.split(',').length
      const params = {
        ids: productId,
        checkStatus: '3',
        page: 1,
        pageSize
      }
      const res = await productApis.getPageList(params)
      this.productData = res.list
      this.productId = res.list.map((i) => i.id).join(',')
    },
    // 添加产品
    onAddProduct () {
      this.spParams = {
        visible: true
      }
    },
    // 添加产品回调
    async selectProductCallBack (val) {
      const params = {
        ids: val.join(','),
        checkStatus: '3',
        page: 1,
        pageSize: val.length
      }
      params.ids = params.ids ? params.ids : '0'
      const res = await productApis.getPageList(params)
      this.productData = res.list
      this.productId = res.list.map((i) => i.id).join(',')
    },
    // 保存二级类目
    onSave () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.rowObj.type === 'edit') {
            await productCategoryApis.update({
              name: this.form.name,
              parentId: this.rowObj.parent.id,
              productId: this.productId,
              id: this.rowObj.row.id
            })
          } else {
            await productCategoryApis.create({
              name: this.form.name,
              parentId: this.rowObj.row.id,
              productId: this.productId
            })
          }
          this.$message.success('操作成功 ')
          this.$emit('handle-after')
          this.close()
        } else {
          this.$message.warning('请完善信息')
        }
      })
    },
    // 删除已选产品
    onDel (row) {
      this.productData = this.productData.filter((item) => item.id !== row.id)
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
